<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>刮刮卡</title>
		<link href="{$Think.config.static_path}css/activity-style.css" rel="stylesheet" type="text/css">
	</head>
	<script type="text/javascript">
		function loading(canvas, options) {
			this.canvas = canvas;
			if (options) {
				this.radius = options.radius || 12;
				this.circleLineWidth = options.circleLineWidth || 4;
				this.circleColor = options.circleColor || 'lightgray';
				this.moveArcColor = options.moveArcColor || 'gray';
			} else {
				this.radius = 12;
				this.circelLineWidth = 4;
				this.circleColor = 'lightgray';
				this.moveArcColor = 'gray';
			}
		}
		loading.prototype = {
			show: function() {
				var canvas = this.canvas;
				if (!canvas.getContext) return;
				if (canvas.__loading) return;
				canvas.__loading = this;
				var ctx = canvas.getContext('2d');
				var radius = this.radius;
				var me = this;
				var rotatorAngle = Math.PI * 1.5;
				var step = Math.PI / 6;
				canvas.loadingInterval = setInterval(function() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);
					var lineWidth = me.circleLineWidth;
					var center = {
						x: canvas.width / 2,
						y: canvas.height / 2
					};

					ctx.beginPath();
					ctx.lineWidth = lineWidth;
					ctx.strokeStyle = me.circleColor;
					ctx.arc(center.x, center.y + 20, radius, 0, Math.PI * 2);
					ctx.closePath();
					ctx.stroke();
					//在圆圈上面画小圆   
					ctx.beginPath();
					ctx.strokeStyle = me.moveArcColor;
					ctx.arc(center.x, center.y + 20, radius, rotatorAngle, rotatorAngle + Math.PI * .45);
					ctx.stroke();
					rotatorAngle += step;

				},
				100);
			},
			hide: function() {
				var canvas = this.canvas;
				canvas.__loading = false;
				if (canvas.loadingInterval) {
					window.clearInterval(canvas.loadingInterval);
				}
				var ctx = canvas.getContext('2d');
				if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
			}
		};
	</script>
	</head>
	<body data-role="page" class="activity-scratch-card-winning">
		<script src="{$Think.config.static_path}jquery-2.1.4.min.js" type="text/javascript"></script>
		<script src="{$Think.config.static_path}js/wScratchPad.js" type="text/javascript"></script>
		<div class="main">
			<div class="cover">
				<img src="{$Think.config.static_path}images/activity-scratch-card-bannerbg.png">
				<div id="prize">
				</div>
				<div id="scratchpad" >
				</div>
			</div>
			<div class="content">
				<div id="zjl" style="display:none" class="boxcontent boxwhite">
					<div class="box">
						<div class="title-red" style="color: #444444;">
							<span class="red">kaka100</span>
							<span>
								恭喜你
							</span>
						</div>
						<div class="Detail">
							<p>
								你中了：
								<span class="red" id ="theAward"></span>
							</p>
							<p>
								兑奖SN码：
								<span class="red" id="sncode">
									fa423sffd889fsdfad
								</span>
							</p>
							<p class="red"></p>
							<!--<p>
								<input name="" class="px" id="tel" value="" type="text" placeholder="用户请输入您的手机号">
							</p>
							<p>
								<p>
									<input class="pxbtn" name="提 交" id="save-btn" type="button" value="用户提交">
								</p>
								<p>
									<input name="" class="px" id="parssword" type="password" value="" placeholder="商家输入兑奖密码">
								</p>
								<p>
									<input class="pxbtn" name="提 交" id="save-btnn" type="button" value="商家提交">
								</p>
							!-->	
						</div>
					</div>
				</div>
				<div class="boxcontent boxwhite">
					<div class="box">
						<div class="title-brown">
							<span>
								奖项设置：
							</span>
						</div>
						<div class="Detail">
							<p>
								一等奖： 苹果1个。奖品数量：10
							</p>
							<p>
								二等奖： 苹果2个 。奖品数量：20
							</p>
							<p>
								三等奖： 苹果3个 。奖品数量：30
							</p>
						</div>
					</div>
				</div>
				<div class="boxcontent boxwhite">
					<div class="box">
						<div class="title-brown">
							活动说明：
						</div>
						<div class="Detail">
							<p class="red">
								本次活动总共可以刮5次,你已经刮了0次,机会如果没用完重新进入本页面可以再刮!
							</p>
							<p>
								亲，请点击进入刮刮奖活动页面，祝您好运哦！
							</p>
						</div>
					</div>
				</div>
			</div>
			<div style="clear:both;">
			</div>
		</div>
		<script src="{$Think.config.static_path}js/alert.js" type="text/javascript"></script>
		<script type="text/javascript">
			window.sncode = "null";
			window.prize = "谢谢参与";
			var openid="{$openid}";
			var zjl = false;
			var num = 0;
			var goon = true;
			//alert(openid);
			$(function() {	
			
				$.getJSON("__URL__/redInit",{openid:openid},function(json){
						if(json.status > 0){
							//alert(1);
							wScratchPad(json.info);
						}else{
							//alert(111);
							if(json.status == -1){
								//document.getElementById('prize').innerHTML = award;
								$("#theAward").html(json.theAward);
								$("#sncode").html(json.sncode);
								
								$("#zjl").slideToggle(500);
							}
							$("#scratchpad").css("background-color","#a9a9a7");
							alert(json.info);
						}
					})
				
				//$("#prize").html("谢谢参与");
				//loadingObj.hide();
				//$(".loading-mask").remove();
			});
			
			
			function wScratchPad(sid){
				$("#scratchpad").wScratchPad({
					width: 150,
					height: 40,
					color: "#a9a9a7",
					scratchMove: function() {
						num++;
						if (num == 2) {
							var award = '';
							$.getJSON("__URL__/getAjaxRedRs",{sid:sid},function(json){
								award = json.info;
								zjl = true;
								document.getElementById('prize').innerHTML = award;
								$("#theAward").html(award);
								$("#sncode").html(json.sncode);
							})
						}

						if (zjl && num > 10 && goon) {
						
							//$("#zjl").fadeIn();
							goon = false;
							
							$("#zjl").slideToggle(500);
							//$("#outercont").slideUp(500)
						}
					}
				});
				
			}


	/*		var openid="{$openid}";
			$(function(){
				
				$("#red").click(function(){
					$.getJSON("__URL__/ajaxRed",{openid:openid},function(json){
						alert(json.info);	
					})
				})	
			})*/
		</script>
		
	</body>

</html>